<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <!--引入jquery-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--引入echarts插件-->
    <script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 成交量柱状图
            $.ajax({
                url: 'workbench/chart/tran/queryMoneyCountGroupByCreateTime',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('main1'));

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '交易统计图表',
                            subtext: '每月成交金额'
                        },
                        xAxis: {
                            type: 'category',
                            data: data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data.data,
                                type: 'bar'
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        });
    </script>
</head>
<body>
<div id="main1" style="width: 70%;height:400px;"></div>
</body>
</html>